<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例6</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: tomato;
            position: absolute;
            left: 0px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

<ml>
    <script type="text/javascript">
        window.onload = function() {
            var op = $("div")
            let wid = 100;

            document.onkeydown = function(event) {
                var event = event || window.event;
                switch (event.keyCode) {
                    case 65:
                        op.offset({
                            left: (op.offset().left - 20)
                        });
                        break;
                    case 87:
                        op.offset({
                            top: (op.offset().top - 20)
                        });
                        break;
                    case 68:
                        op.offset({
                            left: (op.offset().left + 20)
                        });
                        break;
                    case 83:
                        op.offset({
                            top: (op.offset().top + 20)
                        });
                        break;
                    default:
                        break;
                }
                //变绿
                if (event.keyCode == 49 && event.ctrlKey) {
                    op.css("background-color", "green")
                    return false;
                }
                //变黄
                if (event.keyCode == 50 && event.ctrlKey) {

                    op.css("background-color", "yellow")
                    return false;
                }
                //变粉
                if (event.keyCode == 51 && event.ctrlKey) {
                    op.css("background-color", "blue")
                    return false;
                }

                //变大
                if (event.keyCode == 38 && event.ctrlKey) {
                    var asd = document.querySelector('div');
                    wid = wid + 10;
                    asd.style.width = wid + 'px'
                    asd.style.height = wid + 'px'
                    return false;
                }
                //变小
                if (event.keyCode == 40 && event.ctrlKey) {
                    var asd = document.querySelector('div');
                    wid = wid - 10;
                    asd.style.width = wid + 'px'
                    asd.style.height = wid + 'px'
                    return false;
                }

                return false;
            }
        }
    </script>